<!-- Dom模板 -->
<template>
  <div>
    <ul class="BH_cont">
      <li
        v-for="(item, index) in $store.state.bags.shoucangData"
        :key="index"
        @click="liClick(item)"
        class="BH_ulItem"
      >
        <!-- <div><img src="../../../static/img/v2_qsk67k.png" /></div> -->
        <div><img :src="item.book_img_url" /></div>
        <div>{{ item.bookname }}</div>
        <div>{{ item.numbers }}集/{{ item.number }}集</div>
      </li>
      <div v-if="emplay" class="kong">
        <p class="iconfont icon-shoutidai">?</p>
        <p>你还没有收藏的内容哦</p>
      </div>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件

export default {
  data() {
    return {
      msg: "测试",
      dataList: [],
      emplay: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.$store.dispatch("bags/getBookData");
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$store.state.bags)
    // console.log(this.$store.state.bags.allShouData)  //所有的收藏的书
    // console.log(sessionStorage.getItem('userId'))    //登录的用户id
    // console.log(this.$store.state.login.loginuserMsg);   //收藏的数组
    this.$store
      .dispatch("bags/getUserMsg", { userid: sessionStorage.getItem("userId") })
      .then((res) => {
        if (sessionStorage.getItem("userId")) {
          if (this.$store.state.bags.shoucangData.length === 0) {
            this.emplay = true;
          } else {
            this.emplay = false;
          }
        }
        if (!sessionStorage.getItem("userId")) {
          this.emplay = true;
        }
      });

    // console.log(this.dataList)
  },
  // Vue方法定义
  methods: {
    liClick(item) {
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      // this.$store.dispatch("bags/bookItem", item);
      this.$store.commit("bags/getMusicItem", {
        item,
        index: item.numbers - 1,
      });
      this.$router.history.push({
        path: "/playmusic",
        query: {
          path: this.$route.path,
        },
      });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  /* width: 50%;
  height: 6.666667rem;
  line-height: 1.333333rem;
  margin-left: 25%;
  margin-top: 2.666667rem; */
  top: 50%;
  left: 50%;
  margin-top: -0.933333rem;
  margin-left: -2.133333rem;
  position: absolute;
}
.kong p:nth-child(1) {
  width: 1.333333rem;
  height: 1.333333rem;
  border-radius: 50%;
  font-size: 0.933333rem;
  transform: rotate(-30deg);
  padding-left: 1.6rem;
}
.kong p:nth-child(2) {
  font-size: 0.426667rem;
  font-family: PingFangSC-regular;
}
.BH_ulItem {
  /* width: 2.48rem; */
  width: calc(100vw / 3.2);
  margin-bottom: 0.4rem;
}
.BH_ulItem > div:nth-child(1) {
  text-align: center;
  height: 3.2rem;
}
.BH_ulItem > div:nth-child(1) img {
  width: 2.48rem;
  height: 3.2rem;
  border-radius: 0.133333rem;
}
.BH_ulItem > div:nth-child(2) {
  width: 2.373333rem;
  margin: 0.213333rem auto 0;
  text-align: left;
  /* margin-top: ; */
  font-size: 0.346667rem;
  font-family: PingFangSC-bold;
  font-weight: 600;
  height: 0.986667rem;
  color: #5c5c5c;
}
.BH_ulItem > div:nth-child(3) {
  /* padding-left:.4rem; */
  /* width: 2.133333rem; */
  width: 2.373333rem;
  margin: 0.08rem auto 0;
  color: #999999;
  font-size: 0.266667rem;
  /* margin-top: 0.08rem; */
  font-family: PingFangSC-regular;
}
.BH_cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.533333rem 0.31rem 1.333333rem;
  overflow-y: auto;
  height: calc(100vh - 6.1244rem);
  position: relative;
  /* justify-content: space-between; */
}
</style>